import React from 'react'
import { Accordion, List } from 'antd-mobile';
import Test from "./mianban"
// import { relative } from 'path';
import {getSong,getLoginStatus} from "../../api/index"
import {withRouter,Link} from "react-router-dom"

class AccordionExmple extends React.Component {
  constructor(){
    super()
    this.state={
      myCreate:[],
      myLike:[]
    }
  }
    onChange = (key) => {
      console.log(key);
    }
    onChange2=(key) =>{
      console.log(key)
    }
    toDetail(){
      console.log(this.props)
    
    } 
    componentDidMount(){
      getLoginStatus().then(res=>{
        // console.log(res)
        getSong(res.data.profile.userId).then((res)=>{
          // console.log(res.data.playlist.slice(0,3))
          this.setState({
              // list:
              myCreate:res.data.playlist.slice(0,3),
              myLike:res.data.playlist.slice(3)
          })
  
        }).catch(error=>{
          console.log(error)
        })
      })

    }
    render() {
     let {myCreate}=this.state;
     let {myLike} =this.state;
    //  console.log(myCreate);
     console.log(myLike)
      return (
         <div>

       <div style={{position:"relative"}}>
            <Test />
        <div style={{ marginTop: 10, marginBottom: 10 }}>
          <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange}>
            <Accordion.Panel header="我创建的歌单">
              <List className="my-list">
              {myCreate.map((item,index)=>{
                // console.log(item.coverImgUrl)
                return(
                  <Link to={{pathname:"/detailSongList",state:{item}}} key={item.id}>
                  <List.Item key={index} >
                     <div className="imgWrap">
                         <img src={item.coverImgUrl} alt=""/>
                     </div>
                     <div className="SongInfo">
                        <div className="sheetTitle">{item.name}</div>
                        <div className="sheetInfo">
                          <span className="trackCount">{item.trackCount}首</span>
                          <span className="author">by &nbsp;{item.creator.nickname}</span>
                        </div>
                     </div>
                  </List.Item>
                  </Link>
                )
              })} 
              </List>
            </Accordion.Panel>
            
          </Accordion>
        </div>
        </div>
        
        <div style={{position:"relative"}}>
           
        <div style={{ marginTop: 10, marginBottom: 10 }}>
          <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange2}>
            <Accordion.Panel header="我收藏的歌单">
               
                <List className="my-list" >
              {myLike.map((item,index)=>{
                // console.log(item.coverImgUrl)
                return(
                  <Link to={{pathname:"/detailSongList",state:{item}}} key={item.id}>
                  <List.Item key={index}>
                     <div className="imgWrap">
                         <img src={item.coverImgUrl} alt=""/>
                     </div>
                     <div className="SongInfo">
                        <div className="sheetTitle">{item.name}</div>
                        <div className="sheetInfo">
                          <span className="trackCount">{item.trackCount}首</span>
                          <span className="author">by &nbsp;{item.creator.nickname}</span>
                        </div>
                     </div>
                  </List.Item>
                  </Link>
                )
              })} 
              </List>
               
            </Accordion.Panel>
            
          </Accordion>
        </div>
        </div>
        
 

         </div>
        
        
      );
    }
  }
export default withRouter(AccordionExmple)